<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>收货地址</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/css2/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="/css2/common.css" rel="stylesheet"/>
    <link href="/css2/uc.css" rel="stylesheet"/>
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
    <!--头部-->
    <th:block th:include="header1"/>

    <div class="wrapper uc-router">
        <ul>
            <li><a href="">首页</a></li>
            <li><span class="divider"></span></li>
            <li><span>个人中心</span></li>
        </ul>
    </div>

    <div class="wrapper">
        <div class="uc-main clearfix">
            <div class="uc-aside">
                <div class="uc-menu">
                    <div class="tit">订单中心</div>
                    <ul class="sublist">
                        <li><a href="uc-order.html">我的订单</a></li>
                        <li><a href="uc-fav.html">我的收藏</a></li>
                        <li><a href="">浏览历史</a></li>
                    </ul>
                    <div class="tit">客户服务</div>
                    <ul class="sublist">
                        <li><a href="">取消订单记录</a></li>
                        <li><a href="">退款/退货</a></li>
                    </ul>
                    <div class="tit">账户中心</div>
                    <ul class="sublist">
                        <li><a href="uc-account.html">账户信息</a></li>
                        <li><a href="uc-safe.html">账户安全</a></li>
                        <li><a href="">消费记录</a></li>
                        <li><a href="">收货地址</a></li>
                    </ul>
                    <div class="tit">消息中心</div>
                    <ul class="sublist">
                        <li><a href="uc-evaluate.html">商品评价</a></li>
                        <li><a href="">站内消息</a></li>
                    </ul>
                </div>
            </div>
            <div class="uc-content">
                <div class="uc-panel">
                    <div class="uc-bigtit">收货地址</div>
                    <input id="add" type="button" value="新增" class="layui-btn">
                    <div class="uc-panel-bd">

                            <div class="ui-msg-info ui-msg-block">您已创建 2 个收货地址，最多可创建 5 个</div>

                            <div class="address-list">
                                <div class="col col-4" th:each="ma:${MyAddress}">
                                    <div class="item">
                                        <div class="action">
                                            <div class="fl"><a class="edit" th:maid="${ma.id}">修改</a>
                                                <a class="del" th:maid="${ma.id}" >删除</a></div>
                                            <div class="fr"><a class="setdft" th:maid="${ma.id}">设为默认</a></div>

                                        </div>
                                        <div class="info">
                                            <div class="info-item name ellipsis">[[${ma.province}]][[${ma.city}]][[${ma.area}]]（[[${ma.consignee}]] 收）</div>
                                            <div class="info-item address">[[${ma.address}]]</div>
                                            <div class="info-item tel ellipsis">[[${ma.tel}]]</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--脚部-->
    <div class="fatfooter">

    </div>
    <!--脚部-->
</body>

<!--弹出窗口的模板-->
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">收货人</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="id">
                    <input type="text" name="consignee" id="consignee" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">省</label>
                <div class="layui-input-inline">
                    <input type="text" name="province" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">市</label>
                <div class="layui-input-inline">
                    <input type="text" name="city" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">区</label>
                <div class="layui-input-inline">
                    <input type="text" name="area" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="address" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="reset" value="重置" class="layui-btn layui-btn-primary">
                <input id="save" type="button" value="保存" class="layui-btn">
            </div>
        </div>
    </form>
</script>

<script src="/js2/jquery.js"></script>
<link rel="stylesheet" href="/js2/icheck/style.css"/>
<script src="/js2/icheck/icheck.min.js"></script>
<script src="/js2/laydate/laydate.js"></script>
<script src="/js2/global.js"></script>
<script src="/layui/layui.js"></script>
<script th:inline="none">
    //告诉浏览器加载layui框架的那些组件
    //加载完小组件，就执行Function
    layui.use(['table', 'layer', 'form','upload'], function () {
        //console.log("123");
        //第一步先对加载的组件起名
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;

        //给新增的按钮绑定事件
        $("#add").on("click",function (){
            layer.open({
                title:"新增用户",
                type:1,
                area:['400px','400px'],
                content:$("#template1").html()
            });
            //给保存的按钮绑定事件
            $("#save").on("click",function (){
                //1.把表单的数据都取出来
                var data = form.val("form1");
                var tel = data.tel;
                var pd = /^1[3456789]\d{9}$/;
                if (!pd.test(tel)){
                    layer.msg("手机号输入错误，请重新输入");
                    return false;
                }
                console.log(data);
                //2.派一个人去发请求,把上边取出来的数据带过去(Ajax)
                //第一个参数：请求地址
                //第二个参数：请求时传的数据
                //第三个参数：请求成功后做什么：这个function只有200成功时才执行
                data.cmd = "save";
                $.post("/uc-address/save",data,function (){
                    //关窗口
                    layer.closeAll();
                    //给成功提示
                    layer.msg("保存成功");
                    location.reload();
                });
            })
        });
        //给删除按钮绑事件
        $(".del").on("click", function () {
            var address = $(this);
            layer.confirm('您确认要删除吗？',
                function () {
                    $.post("/uc-address/delete", {id:address.attr("maid")}, function () {
                        layer.msg("删除成功");
                        location.reload();
                    });
                }, function () {
                });
        });
        //给修改按钮绑定事件      写方法
        $(".edit").on("click", function () {
            var address = $(this);
            $.get("/uc-address/select?id="+address.attr("maid"), function (oldAddress) {
                console.log(oldAddress);
                layer.open({
                    title: "编辑地址",
                    type: 1,
                    area: ['600px', '600px'],
                    content: $("#template1").html()
                });
                form.val("form1", oldAddress);
                //给保存按钮绑定事件
                $("#save").on("click", function () {
                    //1.把表单中的数据都取出来
                    var data = form.val("form1");
                    console.log(data)
                    //2.派一个人去发请求，把上边取出来的数据带过去(ajax)
                    //第一个参数 请求地址
                    //第二个参数  请求时传的数据
                    //第三个参数 请求成功之后做什么：这个方法只有200成功是才执行
                    $.post("/uc-address/save", data, function () {
                        //关窗口
                        layer.closeAll();
                        //给成功提示
                        layer.msg("保存成功")
                        location.reload();
                    });
                });
            });
        });
        //给设置默认地址绑定事件
        $(".editDefault").on("click",function (){
            var address = $(this);
            layer.confirm('您确认要设置为默认地址吗？',
                function () {
                    $.post("/uc-address/editDefault", {id: address.attr("maid")}, function () {
                        layer.msg("设置成功")
                        location.reload();
                    });
                }, function () {
                });
        });
    });
</script>

</html>